<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true"
      >新增放映厅</el-button
    >

    <!-- 分割线 -->
    <el-divider content-position="left">放映厅列表</el-divider>

    <!-- 表格 -->
    <el-table :data="rooms">
      <el-table-column
        align="center"
        label="放映厅名称"
        prop="room_name"
      ></el-table-column>
      <el-table-column
        align="center"
        label="放映厅类型"
        prop="room_type"
      ></el-table-column>
      <el-table-column align="center" width="200px" label="放映厅座位数">
        <template slot-scope="scope">
          <span v-if="scope.row.room_size">
            {{ scope.row.room_size }} 个座位
          </span>
          <span v-else>[暂未配置作为模板]</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="230px" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="$router.push(`/home/showingon-plan-list/${scope.row.id}`)"
            size="small"
            type="primary"
            circle
            icon="el-icon-view"
          ></el-button>
          <el-button
            size="small"
            type="success"
            circle
            icon="el-icon-plus"
            @click="$router.push(`/home/showingon-plan-add/${scope.row.id}`)"
          ></el-button>
          <el-button
            size="small"
            type="warning"
            circle
            icon="el-icon-menu"
            @click="$router.push(`/home/seat-template/${scope.row.id}`)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            circle
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 脱力了文档流的对话组件 -->
    <el-dialog title="添加放映厅" :visible.sync="dialogFormVisible">
      <el-form
        style="margin-right: 50px"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="放映厅名称" prop="room_name">
          <el-input v-model="form.room_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="放映厅类型" prop="room_type">
          <el-select
            style="width: 100%"
            v-model="form.room_type"
            placeholder="请选择放映厅类型"
          >
            <el-option
              v-for="item in types"
              :key="item.id"
              :value="item.type_name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from '@/http'

export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        movie_cinema_id: this.$route.params.cinemaId,
        room_name: '',
        room_type: '',
      },
      rules: {
        movie_cinema_id: [{ required: true, message: '必填', trigger: 'blur' }],
        room_name: [{ required: true, message: '必填', trigger: 'blur' }],
        room_type: [{ required: true, message: '必选', trigger: 'change' }],
      },
      types: [], // 描述放映厅类型列表
      rooms: [], //存储放映厅列表
    }
  },
  methods: {
    /**查询当前电影院下的所有放映厅列表 */
    list() {
      httpApi.CinemaRoomApi.list({ cinema_id: this.form.movie_cinema_id }).then(
        res => {
          console.log('查询当前影院下的所有放映厅', res)
          this.rooms = res.data.data
        }
      )
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(this.form)
          httpApi.CinemaRoomApi.add(this.form).then(res => {
            if ((res.data.code = 200)) {
              // 添加成功
              // 提示恭喜
              this.$message({
                message: '放映厅添加成功',
                type: 'success',
              })
              // 隐藏自定义对话框
              this.dialogFormVisible = false
              this.$refs['form'].resetFields()
              this.list()
            }
          })
        }
      })
    },
  },
  mounted() {
    // 加载所有放映厅类型列表
    httpApi.CinemaRoomApi.queryAllTypes().then(res => {
      console.log('放映厅类型', res)
      this.types = res.data.data
    })
    //加载放映厅列表
    this.list()
  },
}
</script>

<style lang="scss" scoped></style>
